<template>
    <a-flex v-show="loading" align="center" vertical>
        <a-spin />
    </a-flex>
    <a-flex v-show="videoList.length <= 0&&!loading" align="center" vertical>
        <a-empty description="没有内容" />
    </a-flex>
    <div v-show="videoList.length > 0">
        <a-flex gap="middle" wrap="wrap">
            <template v-for="(v, k) in videoList">
                <VideoItem :videoId="v.id" :title="v.title" :authorUserId="v.userId" :authorNickname="v.userNickname"
                    :publishTime="v.publishTime" :coverUrl="v.coverUrl"></VideoItem>
            </template>
        </a-flex>

        <a-flex align="center" vertical style="margin-top: 50px;">
            <a-pagination v-model:current="pageNo" v-model:page-size="pageSize" :page-size-options="pageSizeOptions"
                :total="total" show-size-changer @showSizeChange="onPageSizeChange" @change="onPageNoChange" />
        </a-flex>
    </div>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import VideoItem from '@/components/video/VideoItem.vue';
import request from '@/script/utils/request'; // 导入Axios实例

const videoList = ref([])
const loading = ref(false)
const pageSizeOptions = ref<string[]>(['20', '40', '60', '80']);

const pageNo = ref(1);
const total = ref(0);
const pageSize = ref(20);
const props = defineProps({
    baseOptions: {
        type: Object
    }
});

function jsonToUrlParam(json) {
    return Object.keys(json).map(key => key + '=' + json[key]).join('&');
}
import { message } from 'ant-design-vue';
const load = async (callback) => {
    loading.value = true;
    //更新分页信息
    const options = props.baseOptions;
    options.params.pageNo = pageNo.value;
    options.params.pageSize = pageSize.value;
    console.log(options);

    //读取分页
    try {
        const response = await request.get(`${options.url}?${jsonToUrlParam(options.params)}`)
        total.value = response.data.total;
        videoList.value = response.data.list;
        callback(response);
    } catch (e) {
        
    } finally {
        loading.value = false;
    }
}

const onPageSizeChange = (no: number, size: number) => {
    console.log(no, size);
    pageSize.value = size;
    pageNo.value = 1;
    // load()
};
const onPageNoChange = (no: number, size: number) => {
    pageNo.value = no;
    load()
};

defineExpose({
    load
});

</script>